import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import {
  Modal,
  Row,
  Col,
  Input,
  Form,
  Button,
  message,
  Switch,
} from 'antd';
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
/**
 *
 * @param props
 * @returns
 */
const CreateRoleModel = (props: any) => {
  const { dispatch, loading, role, createEdit, setCreateEdit, fetchRole } =
    props;
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const [form] = Form.useForm();

  useEffect(() => {
    if (createEdit && role && role._id) {
      form.setFieldsValue({
        ...role,
        admin: role.admin === "true" ? true : false,
      });
    } else {
      createEdit && form.resetFields();
      form.setFieldsValue({
        admin: false,
      });
    }
  }, [createEdit]);

  const handleCancel = () => {
    setCreateEdit(false);
  };

  const handleSave = async () => {
    const res = await form.validateFields();
    if (role && role._id) {
      dispatch({
        type: 'enoadRBAC/updateRole',
        payload: { ...res, access: role.access },
      }).then((res) => {
        if (res) {
          message.success(res.msg);
          setCreateEdit(false);
          fetchRole();
        }
      });
    } else {
      dispatch({ type: 'enoadRBAC/createRole', payload: res }).then((res) => {
        if (res) {
          message.success(res.msg);
          setCreateEdit(false);
          fetchRole();
        }
      });
    }
  };

  return (
    <>
      <Modal
        title={role && role._id ? '编辑角色' : '新建角色'}
        destroyOnClose
        visible={createEdit}
        width={800}
        getContainer={false}
        maskClosable={false}
        onCancel={handleCancel}
        onOk={handleSave}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取 消
          </Button>,
          <Button
            key="submit"
            loading={
              loading.effects['enoadRBAC/createRole'] ||
              loading.effects['enoadRBAC/updateRole']
            }
            disabled={
              loading.effects['enoadRBAC/createRole'] ||
              loading.effects['enoadRBAC/updateRole']
            }
            type="primary"
            onClick={handleSave}
          >
            确 定
          </Button>,
        ]}
      >
        <Row>
          <Col span={24}>
            <Form form={form}>
              <Form.Item
                {...formItemLayout}
                labelAlign={'left'}
                rules={[{ required: true, message: '请输入角色名称' }]}
                label="角色名称"
                name="name"
              >
                <Input
                  style={{ borderRadius: '16px' }}
                  placeholder={'请输入角色名称'}
                  type="input"
                />
              </Form.Item>
              <Form.Item
              {...formItemLayout}
              labelAlign={"left"}
              rules={[{ required: false }]}
              label="是否管理员"
              name="admin"
              valuePropName="checked"
            >
              <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked
              />
            </Form.Item>
            </Form>
          </Col>
        </Row>
      </Modal>
    </>
  );
};
//关联到用户权限管理state的models中。
export default connect(({ enoadRBAC, loading }) => ({
  ...enoadRBAC,
  loading,
}))(CreateRoleModel);
